<%@ page import="com.wwdx.shiro.SessionUser" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="/public/inc/head.jsp"/>
    <script type="text/javascript">
        
        var $table;
        $(function () {
            var url = "/system/user/list";
            tableInit(url);
            
            //查询  
            $('#searchBtn').click(function () {
                $table.bootstrapTable('refresh');
            });
            
            //清空
            $('#clearBtn').click(function () {
                $('#myform')[0].reset();
                $table.bootstrapTable('refresh');
            });

            $('#exportExcel').click(function () {
                $("#myModal2").modal('show');
                $("#showInfo2").html("正在发送……");
                $.get("/system/user/send",{email:'<%=SessionUser.getEmail()%>'},function (data) {
                    $("#showInfo2").empty().html(data.data);
                    setTimeout(function (args) { $("#myModal2").modal('hide') },2000);
                    $("#exportExcel").attr("disabled", true);
                });
            });
            
            //回车提交事件
            document.onkeydown = function (e) {
                //兼容FF和IE和Opera
                var theEvent = e || window.event;
                var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
                //keyCode=13是回车键
                if (code === 13) {
                    $table.bootstrapTable('refresh');
                }
            }
        });
           
        /**
         * 用户列表
         */
        function tableInit(url) {
            $table = $("#table").bootstrapTable({
                url: url,                           //请求后台的URL（*）
                cache: false,
                striped: true,                      //是否显示行间隔色
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pagination: true,                   //是否显示分页（*）
                showJumpto:true,
                paginationPreText:'上一页',
                paginationNextText:'下一页',
                toolbar:"#toolbar",
                uniqueId: "userid",                 //每一行的唯一标识，一般为主键列
                showExport: true,
                exportTypes:['excel'],              //导出文件类型
                //得到查询的参数
                queryParams : function (params) {
                    return {
                        rows: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,    //页码
                        nickname:$("#nickname").val(),
                        userid:$("#userid").val(),
                        days:$("#days").val()
                    };
                },
                columns: [{
                    title : '序号',
                    align: "center",
                    width: 40,
                    formatter: function (value, row, index) {
                        //获取每页显示的数量
                        var pageSize = $table.bootstrapTable('getOptions').pageSize;
                        //获取当前是第几页  
                        var pageNumber = $table.bootstrapTable('getOptions').pageNumber;
                        //返回序号，注意index是从0开始的，所以要加上1
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                }, {
                    field: 'headImgUrl',
                    title: '头像',
                    formatter:function (value) {
                        var reg = /http/;
                        if(!reg.test(value)){
                            value = "http://img.readerday.com/face/headimg.jpg";
                        }
                        return "<img src=\""+value+"\" style=\"height: 70px;width: 70px;\">";
                    }
                }, {
                    field: 'userid',
                    title: '用户编号'
                }, {
                    field: 'nickname',
                    title: '昵称'
                }, {
                    field: 'sex',
                    title: '性别',
                    formatter:function (value) {
                        var sex;
                        if (value === 1){
                            sex = "男";
                        }else if(value === 2){
                            sex = "女";
                        }else {
                            sex = "未知";
                        }
                        return sex;
                    }
                }, {
                    field: 'channel',
                    title: '渠道'
                }, {
                    field: 'gmtCreated',
                    title: '注册时间'
                }, {
                    field: 'gmtModified',
                    title: '登录时间'
                }],
                onLoadSuccess: function () {
                },
                onLoadError: function () {
                    alert("数据加载失败！");
                },
                onDblClickRow: function (row, $element) {
                    var sex = row.sex;
                    if (sex === 1){
                        sex = "男";
                    }else if(sex === 2){
                        sex = "女";
                    }else {
                        sex = "未知";
                    }
                    var phone = row.phone;
                    if (typeof(phone) === "undefined"){
                        phone = "";
                    }
                    $("#myModal").modal('show');
                    $("#showInfo").html("<form class=\"form-horizontal\" role=\"form\">\n" +
            "                                <div class=\"form-group has-success\">\n" +
            "                                    <label class=\"col-sm-2 control-label\">用户编号</label>\n" +
            "                                    <div class=\"col-sm-10\">\n" +
            "                                        <input type=\"text\" readonly class=\"form-control\" value=\""+row.userid+"\">\n" +
            "                                    </div>\n" +
            "                                </div>\n" +
            "                                <div class=\"form-group has-success\">\n" +
            "                                    <label class=\"col-sm-2 control-label\">用户昵称</label>\n" +
            "                                    <div class=\"col-sm-10\">\n" +
            "                                        <input type=\"text\" readonly class=\"form-control\" value=\""+row.nickname+"\">\n" +
            "                                    </div>\n" +
            "                                </div>\n" +
            "                                <div class=\"form-group has-success\">\n" +
            "                                    <label class=\"col-sm-2 control-label\">手机</label>\n" +
            "                                    <div class=\"col-sm-10\">\n" +
            "                                        <input type=\"text\" readonly class=\"form-control\" value=\""+phone+"\">\n" +
            "                                    </div>\n" +
            "                                </div>\n" +
            "                                <div class=\"form-group has-success\">\n" +
            "                                    <label class=\"col-sm-2 control-label\">unionid</label>\n" +
            "                                    <div class=\"col-sm-10\">\n" +
            "                                        <input type=\"text\" readonly class=\"form-control\" value=\""+row.unionId+"\">\n" +
            "                                    </div>\n" +
            "                                </div>\n" +
            "                                <div class=\"form-group has-success\">\n" +
            "                                    <label class=\"col-sm-2 control-label\">token</label>\n" +
            "                                    <div class=\"col-sm-10\">\n" +
            "                                        <input type=\"text\" readonly class=\"form-control\" value=\""+row.token+"\">\n" +
            "                                    </div>\n" +
            "                                </div>\n" +
            "                                <div class=\"form-group has-success\">\n" +
            "                                    <label class=\"col-sm-2 control-label\">性别</label>\n" +
            "                                    <div class=\"col-sm-10\">\n" +
            "                                        <input type=\"text\" readonly class=\"form-control\" value=\""+sex+"\">\n" +
            "                                    </div>\n" +
            "                                </div>\n" +
            "                            </form>");
                }
            });
        }
    </script>
</head>
<body>
<div id="header" class="navbar navbar-static-top" role="navigation">
    <jsp:include page="/public/inc/top.jsp"/>
</div>
<div class="container-fluid" style="margin-top:5px;margin-bottom:60px;">
    <div class="row">
        <jsp:include page="/public/inc/menu.jsp"/>
        <div class="col-xs-12 col-sm-10">
            <div id="toolbar">
                <form id="myform">
                    <label>
                        <input type="text" class="form-control" id="userid" name="userid" placeholder="用户编号"/>
                    </label>
                    <label>
                        <input type="text" class="form-control" id="nickname" name="nickname" placeholder="用户昵称"/>
                    </label>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" id="searchBtn" class="btn btn-default">筛选</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="reset" id="clearBtn" class="btn btn-default">清空</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <%--<button type="button" id="exportExcel" class="btn btn-default">Excel</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;--%>
                    <span style="color: indigo;">Tips：</span><span style="color: red;">双击表格可查看用户详细信息</span>
                </form>
            </div>
            <table id="table"></table>
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="myModalLabel">用户详情</h4>
                        </div>
                        <div id="showInfo" class="modal-body"></div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="myModalLabel2">通知</h4>
                        </div>
                        <div id="showInfo2" class="modal-body"></div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="/public/inc/bottom.jsp"/>
</body>
</html>